<script setup>
import {onMounted, reactive} from "vue";
import router from '@/routes';
import OrderService from "../../stores/OrderService";

const order = JSON.parse(sessionStorage.getItem('order'))
// console.log(order)

// const orderInfo = reactive({
//     order:[],
// })

// const order = reactive({
//     orderId:'',
//     orderNum: '',
//     username: '',
//     orderDate:'',
//     cardType:'',
//     creditCard:'',
//     expiryDate:'',
//     billToFirstName:'',
//     billToLastName:'',
//     billAddress1:'',
//     billAddress2:'',
//     billCity:'',
//     billState:'',
//     billZip:'',
//     billCountry:'',
//     shipToFirstName:'',
//     shipToLastName:'',
//     shipAddress1:'',
//     shipAddress2:'',
//     shipCity:'',
//     shipState:'',
//     shipZip:'',
//     shipCountry:'',
//     totalPrice:0,
// })

const confirm = async () => {
    // alert(JSON.stringify(order))

    if(order != null){
        const [err, res] = await OrderService.promise_process(OrderService.addOrder(order))
        if(err){
            ElMessage({
                message: '服务器异常，提交订单失败！',
                type: 'error',
            })
        }
        if(res){
            ElMessage({
                message: '订单提交成功！',
                type: 'success',
            })
                //订单提交确认，确认后 清空购物车，
           clearCart()
            //清除session中的 订单信息
           sessionStorage.removeItem("order")

            //将 提交成功的订单存入 session
           console.log(res.data)
           let finalOrder = res.data
           sessionStorage.setItem("finalOrder", JSON.stringify(finalOrder))

           //跳往订单显示页面
           router.push({path:'/order'})
        }
    }

}

const back = () => {
  router.push({
    path:'/order/add'
  })
}

const clearCart = () => {
    let cart = {
        cartItem:[],
        subTotal: 0.0,
    }
    sessionStorage.setItem("cart", JSON.stringify(cart))
}

onMounted(() => {
    // let tempOrder = JSON.parse(sessionStorage.getItem('order'))
    // orderInfo.order = tempOrder
    // order  = JSON.parse(sessionStorage.getItem('order'))
    // console.log(orderInfo.order)
})
</script>

<template>
<top/>
    <div style="font-weight: 800">请确认下列信息是否无误。</div>
    <el-row :gutter="20" class="el-row">
        <el-col :span="8" :offset="2">
            <el-card>
                <template #header>
                    Billing Address
                </template>
                <el-form :model="order" label-width="120px" disabled>
                    <el-form-item label="First name:">
                        <el-input v-model="order.billToFirstName" />
                    </el-form-item>
                    <el-form-item label="Last name:">
                        <el-input v-model="order.billToFirstName" />
                    </el-form-item>
                    <el-form-item label="Address 1:">
                        <el-input v-model="order.billAddress1" />
                    </el-form-item>
                    <el-form-item label="Address 2:">
                        <el-input v-model="order.billAddress2" />
                    </el-form-item>
                    <el-form-item label="City:">
                        <el-input v-model="order.billCity" />
                    </el-form-item>
                    <el-form-item label="State:">
                        <el-input v-model="order.billState" />
                    </el-form-item>
                    <el-form-item label="Zip:">
                        <el-input v-model="order.billZip" />
                    </el-form-item>
                    <el-form-item label="Country:">
                        <el-input v-model="order.billCountry" />
                    </el-form-item>

                </el-form>
            </el-card>
        </el-col>
        <el-col :span="8" :offset="4">
            <el-card>
                <template #header>
                    Shipping Address
                </template>
                <el-form :model="order" label-width="120px" disabled>
                    <el-form-item label="First name:">
                        <el-input v-model="order.shipToFirstName" />
                    </el-form-item>
                    <el-form-item label="Last name:">
                        <el-input v-model="order.shipToFirstName" />
                    </el-form-item>
                    <el-form-item label="Address 1:">
                        <el-input v-model="order.shipAddress1" />
                    </el-form-item>
                    <el-form-item label="Address 2:">
                        <el-input v-model="order.shipAddress2" />
                    </el-form-item>
                    <el-form-item label="City:">
                        <el-input v-model="order.shipCity" />
                    </el-form-item>
                    <el-form-item label="State:">
                        <el-input v-model="order.shipState" />
                    </el-form-item>
                    <el-form-item label="Zip:">
                        <el-input v-model="order.shipZip" />
                    </el-form-item>
                    <el-form-item label="Country:">
                        <el-input v-model="order.shipCountry" />
                    </el-form-item>

                </el-form>
            </el-card>
        </el-col>
    </el-row>
  <el-button type="primary" @click="back">返回</el-button>
  <el-button type="primary" @click="confirm">确认</el-button>
<bottom />
</template>

<style scoped>
.el-row{
    width: 1280px;
    height: 450px;
}

.el-card{
    margin-bottom: 20px;
}
</style>
